<template>
  <div class="center_bottom">
    <Echart
      :options="options"
      id="bottomLeftChart"
      class="echarts_bottom"
      :mapJson="mapJson"
    ></Echart>
  </div>
</template>

<script>
import { currentGET } from "api";
import { graphic } from "echarts";
import guianArea from "@/utils/map/guianArea.json";

// 文字背景
var img2 =
  "image://";
// 地图坐标图片
const localImg =
  "image://";
// var mapDate = [
//   {
//     name: "阜平县",
//     value: [106.593296, 26.414809],
//     datas: 13,
//     datas1: 16,
//   },
//   {
//     name: "政府服务大厅",
//     value: [106.495981, 26.43642],
//     datas: 14,
//     datas1: 17,
//   },
//   {
//     name: "贵州省安顺市平坝区凯坝立交",
//     value: [106.489118, 26.302646],
//     datas: 24,
//     datas1: 28,
//   },
//   {
//     name: "麦坪乡",
//     value: [106.544177, 26.482454],
//     datas: 24,
//     datas1: 19,
//   },
// ];

const toPercent = (val, fix = 0)=> {
      return val || val === 0 ? Number(val).toFixed(fix) : "-";
    }

export default {
  data() {
    return {
      options: {},
      mapJson: guianArea,
    };
  },
  props: {
    data: {
      type: Array,
      default: () => [],
    },
  },
  mounted() {
    this.init(this.data)
  },
  watch: {
    data: {
      handler(val) {
        this.init(val);
      },
      deep: true,
    },
  },
  methods: {
    
    init(newData) {
      const mapDate = newData.map(item =>{
        return {
          ...item,
          name: item.region,
          value: [item.longitude, item.latitude],
        }
      })
      this.options = {
        // title: {
        //     top: 20,
        //     text: '贵安新区',
        //     subtext: '',
        //     x: 'center',
        //     textStyle: {
        //         color: '#fff',
        //         fontWeight: 100,
        //         fontSize: 14,
        //     },
        // },
        geo: {
          show: false,
          map: "bd",
          aspectScale: 0.75,
          layoutCenter: ["50%", "55.5%"],
          layoutSize: "100%",
          silent: true,
          roam: false,
          z: 0,
          itemStyle: {
            normal: {
              areaColor: "#9ec8fa",
              shadowColor: "#d6e3f7",
              shadowBlur: 0,
              shadowOffsetX: 0,
              shadowOffsetY: 5,
              borderColor: "rgba(0, 0, 0, 0.7)",
              borderWidth: 0.5,
            },
            // emphasis: {
            //   areaColor: "#2AB8FF",
            //   borderWidth: 1,
            //   color: "green",
            //   label: {
            //     show: false,
            //   },
            // },
          },
        },
        series: [
          {
            type: "map",
            roam: true,
            // projection: {
            //   project: (point) => [
            //     (point[0] / 180) * Math.PI,
            //     -Math.log(
            //       Math.tan((Math.PI / 2 + (point[1] / 180) * Math.PI) / 2)
            //     ),
            //   ],
            //   unproject: (point) => [
            //     (point[0] * 180) / Math.PI,
            //     ((2 * 180) / Math.PI) * Math.atan(Math.exp(point[1])) - 90,
            //   ],
            // },
            label: {
              normal: {
                show: false,
                textStyle: {
                  color: "#fff",
                },
              },
              emphasis: {
                textStyle: {
                  color: "#fff",
                },
              },
            },
            itemStyle: {
              normal: {
                borderColor: "#2ab8ff",
                borderWidth: 0,
                areaColor: "#2670d4",
                shadowColor: "#6cadfa",
                shadowBlur: 0,
                shadowOffsetX: 0,
                shadowOffsetY: 15,
              },
              emphasis: {
                // borderColor: "#2ab8ff",
                // borderWidth: 1,
                areaColor: "#2670d4",
                // shadowColor: "rgba(38, 112, 212, 0.5)",
                // shadowBlur: 0,
                // shadowOffsetX: 0,
                // shadowOffsetY: 1,
              },
            },
            select:{
              disabled: true
            },
            zoom: 1.25,
            roam: false,
            map: "bd",
          },
          {
            tooltip: {
              show: false,
            },
            type: "effectScatter",
            coordinateSystem: "geo",
            rippleEffect: {
              scale: 10,
              brushType: "stroke",
            },
            showEffectOn: "render",
            itemStyle: {
              normal: {
                shadowColor: "#0ff",
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                color: function (params) {
                  var colorList = [
                    new graphic.LinearGradient(1, 0, 0, 0, [
                      {
                        offset: 0,
                        color: "#64fbc5",
                      },
                      {
                        offset: 1,
                        color: "#018ace",
                      },
                    ]),
                    new graphic.LinearGradient(1, 0, 0, 0, [
                      {
                        offset: 0,
                        color: "#64fbc5",
                      },
                      {
                        offset: 1,
                        color: "#018ace",
                      },
                    ]),
                    new graphic.LinearGradient(1, 0, 0, 0, [
                      {
                        offset: 0,
                        color: "#168e6d",
                      },
                      {
                        offset: 1,
                        color: "#c78d7b",
                      },
                    ]),
                    new graphic.LinearGradient(1, 0, 0, 0, [
                      {
                        offset: 0,
                        color: "#61c0f1",
                      },
                      {
                        offset: 1,
                        color: "#6f2eb6",
                      },
                    ]),
                    new graphic.LinearGradient(1, 0, 0, 0, [
                      {
                        offset: 0,
                        color: "#168e6d",
                      },
                      {
                        offset: 1,
                        color: "#c78d7b",
                      },
                    ]),
                    new graphic.LinearGradient(1, 0, 0, 0, [
                      {
                        offset: 0,
                        color: "#61c0f1",
                      },
                      {
                        offset: 1,
                        color: "#6f2eb6",
                      },
                    ]),
                  ];
                  return colorList[params.dataIndex];
                },
              },
            },
            label: {
              normal: {
                color: "#fff",
              },
            },
            symbol: "circle",
            symbolSize: [10, 5],
            data: mapDate,
            zlevel: 1,
          },
          {
            type: "scatter",
            coordinateSystem: "geo",
            itemStyle: {
              color: "#f00",
            },
            symbol: localImg,
            // symbol: function (value, params) {
            //     return params.data.img;
            // },
            symbolSize: [32, 41],
            symbolOffset: [0, -20],
            z: 9999,
            data: mapDate,
          },
          {
            type: "scatter",
            coordinateSystem: "geo",
            label: {
              normal: {
                show: true,
                formatter: function (params) {
                  const name = params.name;
                  const item = params.data;
                  const one = `{one|}  ${toPercent(item.mediumVoltageFailureRate, 2)}%\n`;
                  const two = `{two|}  ${toPercent(item.averageOutageTime, 2)}h\n`;
                  const three = `{three|}  ${toPercent(item.failureNumber, 0)}次\n`;
                  let text = ``;
                  if (true) {
                    text += one
                    text += two
                    text += three
                  }
                  return text;
                },
                fontWeight: 800,
                fontSize: 12,
                height: 70,
                // offset: [0,-25],
                color: '#290AE9',
                lineHeight: 20,
                rich: {
                  one: {
                    backgroundColor: "#8F00FD",
                    borderColor: '#E2FFFF',
                    borderWidth: 1,
                    width: 14,
                    height: 14,
                    borderRadius: 50,
                  },
                  two: {
                    backgroundColor: "#FB9E00",
                    borderColor: '#E2FFFF',
                    borderWidth: 1,
                    width: 14,
                    height: 14,
                    borderRadius: 50,
                  },
                  three: {
                    backgroundColor: "#1EC969",
                    borderColor: '#E2FFFF',
                    borderWidth: 1,
                    width: 14,
                    height: 14,
                    borderRadius: 50,
                  },
                },
              },
              emphasis: {
                show: true,
              },
            },
            // itemStyle: {
            //   color: "#00FFF6",
            // },
            symbol: img2,
            symbolSize: [67, 77],
            symbolOffset: [0, -85],
            z: 999,
            data: mapDate,
          },
          {
            type: "scatter",
            coordinateSystem: "geo",
            label: {
              normal: {
                show: true,
                formatter: function (params) {
                  var name = params.name;
                  var text = `${name}`;
                  return text;
                },
                fontWeight: 800,
                fontFamily: 'PingFangSC, PingFang SC',
                fontSize: 18,
                height: 14,
                color: '#FFFFFF',
                align: 'center',
              },
              emphasis: {
                show: true,
              },
            },
            itemStyle: {
              color: "transparent",
            },
            symbol: 'arrow',
            // symbolSize: [67, 77],
            symbolOffset: [0, 20],
            z: 999,
            data: mapDate,
          },
        ],
      };
      this.options1 = {
        // backgroundColor: "#2957A2",
        // backgroundColor: {
        //     image: 'xxx/xxx.png'
        //     // 这里可以是图片的 URL，
        //     // 或者图片的 dataURI，
        //     // 或者 HTMLImageElement 对象，
        //     // 或者 HTMLCanvasElement 对象。
        // }
        // title: {
        //     top: 20,
        //     text: '贵安新区',
        //     subtext: '',
        //     x: 'center',
        //     textStyle: {
        //         color: '#fff',
        //         fontWeight: 100,
        //         fontSize: 14,
        //     },
        // },
        // tooltip: {
        //             trigger: 'item',
        //             formatter: function(params) {
        //                 return params.data.name + '<br/>' +
        //                     '经度: ' + params.data.value[0].toFixed(2) + '<br/>' +
        //                     '纬度: ' + params.data.value[1].toFixed(2) + '<br/>' +
        //                     '数值: ' + params.data.value[3];
        //             }
        //         },
        grid3D: {},
        // 默认情况下, x, y, z 分别是从 0 到 1 的数值轴
        xAxis3D: {},
        yAxis3D: {},
        zAxis3D: {},
        geo3D: {
          map: "bd",
          show: false,
          zlevel: -20,
          boxWidth: 200,
          boxHeight: 5,

          viewControl: {
            // 用于鼠标的旋转，缩放等视角控制。
            projection: "perspective", // 投影方式，默认为透视投影'perspective'，也支持设置为正交投影'orthographic'。
            autoRotate: false, // 是否开启视角绕物体的自动旋转查看。[ default: false ]
            autoRotateDirection: "cw", // 物体自传的方向。默认是 'cw' 也就是从上往下看是顺时针方向，也可以取 'ccw'，既从上往下看为逆时针方向。
            autoRotateSpeed: 10, // 物体自传的速度。单位为角度 / 秒，默认为10 ，也就是36秒转一圈。
            autoRotateAfterStill: 3, // 在鼠标静止操作后恢复自动旋转的时间间隔。在开启 autoRotate 后有效。[ default: 3 ]
            damping: 0, // 鼠标进行旋转，缩放等操作时的迟滞因子，在大于等于 1 的时候鼠标在停止操作后，视角仍会因为一定的惯性继续运动（旋转和缩放）。[ default: 0.8 ]
            rotateSensitivity: 1, // 旋转操作的灵敏度，值越大越灵敏。支持使用数组分别设置横向和纵向的旋转灵敏度。默认为1, 设置为0后无法旋转。	rotateSensitivity: [1, 0]——只能横向旋转； rotateSensitivity: [0, 1]——只能纵向旋转。
            zoomSensitivity: 2, // 缩放操作的灵敏度，值越大越灵敏。默认为1,设置为0后无法缩放。
            panSensitivity: 1, // 平移操作的灵敏度，值越大越灵敏。默认为1,设置为0后无法平移。支持使用数组分别设置横向和纵向的平移灵敏度
            panMouseButton: "left", // 平移操作使用的鼠标按键，支持：'left' 鼠标左键（默认）;'middle' 鼠标中键 ;'right' 鼠标右键(注意：如果设置为鼠标右键则会阻止默认的右键菜单。)
            rotateMouseButton: "left", // 旋转操作使用的鼠标按键，支持：'left' 鼠标左键;'middle' 鼠标中键（默认）;'right' 鼠标右键(注意：如果设置为鼠标右键则会阻止默认的右键菜单。)
            distance: 300, // [ default: 100 ] 默认视角距离主体的距离，对于 grid3D 和 geo3D 等其它组件来说是距离中心原点的距离,对于 globe 来说是距离地球表面的距离。在 projection 为'perspective'的时候有效。
            minDistance: 40, // [ default: 40 ] 视角通过鼠标控制能拉近到主体的最小距离。在 projection 为'perspective'的时候有效。
            maxDistance: 400, // [ default: 400 ] 视角通过鼠标控制能拉远到主体的最大距离。在 projection 为'perspective'的时候有效。
            alpha: 40, // 视角绕 x 轴，即上下旋转的角度。配合 beta 可以控制视角的方向。[ default: 40 ]
            beta: 15, // 视角绕 y 轴，即左右旋转的角度。[ default: 0 ]
            minAlpha: -360, // 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。[ default: 5 ]
            maxAlpha: 360, // 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。[ default: 90 ]
            minBeta: -360, // 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。[ default: -80 ]
            maxBeta: 360, // 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。[ default: 80 ]
            center: [0, 0, 0], // 视角中心点，旋转也会围绕这个中心点旋转，默认为[0,0,0]。
            animation: true, // 是否开启动画。[ default: true ]
            animationDurationUpdate: 1000, // 过渡动画的时长。[ default: 1000 ]
            animationEasingUpdate: "cubicInOut", // 过渡动画的缓动效果。[ default: cubicInOut ]
          },
        },
        series: [
          // 涟漪
          // {
          //     tooltip: {
          //         show: false,
          //     },
          //     show: true,
          //     type: 'effectScatter',
          //     coordinateSystem: 'geo3D',
          //     rippleEffect: {
          //         scale: 10,
          //         brushType: 'stroke',
          //     },
          //     showEffectOn: 'render',
          //     itemStyle: {
          //         normal: {
          //             shadowColor: '#0ff',
          //             shadowBlur: 10,
          //             shadowOffsetX: 0,
          //             shadowOffsetY: 0,
          //             color: function (params) {
          //                 var colorList = [
          //                     new graphic.LinearGradient(1, 0, 0, 0, [
          //                         {
          //                             offset: 0,
          //                             color: '#64fbc5',
          //                         },
          //                         {
          //                             offset: 1,
          //                             color: '#018ace',
          //                         },
          //                     ]),
          //                     new graphic.LinearGradient(1, 0, 0, 0, [
          //                         {
          //                             offset: 0,
          //                             color: '#64fbc5',
          //                         },
          //                         {
          //                             offset: 1,
          //                             color: '#018ace',
          //                         },
          //                     ]),
          //                     new graphic.LinearGradient(1, 0, 0, 0, [
          //                         {
          //                             offset: 0,
          //                             color: '#168e6d',
          //                         },
          //                         {
          //                             offset: 1,
          //                             color: '#c78d7b',
          //                         },
          //                     ]),
          //                     new graphic.LinearGradient(1, 0, 0, 0, [
          //                         {
          //                             offset: 0,
          //                             color: '#61c0f1',
          //                         },
          //                         {
          //                             offset: 1,
          //                             color: '#6f2eb6',
          //                         },
          //                     ]),
          //                     new graphic.LinearGradient(1, 0, 0, 0, [
          //                         {
          //                             offset: 0,
          //                             color: '#168e6d',
          //                         },
          //                         {
          //                             offset: 1,
          //                             color: '#c78d7b',
          //                         },
          //                     ]),
          //                     new graphic.LinearGradient(1, 0, 0, 0, [
          //                         {
          //                             offset: 0,
          //                             color: '#61c0f1',
          //                         },
          //                         {
          //                             offset: 1,
          //                             color: '#6f2eb6',
          //                         },
          //                     ]),
          //                 ];
          //                 return colorList[params.dataIndex];
          //             },
          //         },
          //     },
          //     label: {
          //         normal: {
          //             color: '#fff',
          //         },
          //     },
          //     symbol: 'circle',
          //     symbolSize: [10, 5],
          //     data: mapDate,
          //     zlevel: 999,
          // },
          {
            type: "map3D", // 系列类型
            name: "map3D", // 系列名称
            map: "bd", // 地图类型。echarts-gl 中使用的地图类型同 geo 组件相同(ECharts 中提供了两种格式的地图数据，一种是可以直接 script 标签引入的 js 文件，引入后会自动注册地图名字和数据。还有一种是 JSON 文件，需要通过 AJAX 异步加载后手动注册。)
            // 环境贴图，支持純颜色值，渐变色，全景贴图的 url。默认为 'auto'，在配置有 light.ambientCubemap.texture 的时候会使用该纹理作为环境贴图。否则则不显示环境贴图。
            environment: new graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  // 配置为垂直渐变的背景
                  offset: 0,
                  color: "#00aaff", // 天空颜色
                },
                {
                  offset: 0.7,
                  color: "#998866", // 地面颜色
                },
                {
                  offset: 1,
                  color: "#998866", // 地面颜色
                },
              ],
              false
            ),
            boxWidth: 200,
            boxHeight: 10,
            zlevel: -10,
            label: {
              // 标签的相关设置
              show: false, // (地图上的城市名称)是否显示标签 [ default: false ]
              //distance: 50,               // 标签距离图形的距离，在三维的散点图中这个距离是屏幕空间的像素值，其它图中这个距离是相对的三维距离
              //formatter:,               // 标签内容格式器
              textStyle: {
                // 标签的字体样式
                color: "#000", // 地图初始化区域字体颜色
                fontSize: 12, // 字体大小
                opacity: 1, // 字体透明度
                backgroundColor: "rgba(0,23,11,0)", // 字体背景色
              },
            },

            itemStyle: {
              // 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。
              color: "#2670d4", // 地图板块的颜色
              opacity: 1, // 图形的不透明度 [ default: 1 ]
              borderWidth: 0.5, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域   [ default: 0 ]
              borderColor: "#a2cafa", // 图形描边的颜色。[ default: #333 ]
            },

            emphasis: {
              // 鼠标 hover 高亮时图形和标签的样式 (当鼠标放上去时  label和itemStyle 的样式)
              label: {
                // label高亮时的配置
                show: true,
                textStyle: {
                  color: "#fff", // 高亮时标签颜色变为 白色
                  fontSize: 15, // 高亮时标签字体 变大
                },
              },
              itemStyle: {
                // itemStyle高亮时的配置
                areaColor: "#d9b74f", // 高亮时地图板块颜色改变
              },
            },

            groundPlane: {
              // 地面可以让整个组件有个“摆放”的地方，从而使整个场景看起来更真实，更有模型感。
              show: false, // 是否显示地面。[ default: false ]
              color: "#aaa", // 地面颜色。[ default: '#aaa' ]
            },
            light: {
              // 光照相关的设置。在 shading 为 'color' 的时候无效。  光照的设置会影响到组件以及组件所在坐标系上的所有图表。合理的光照设置能够让整个场景的明暗变得更丰富，更有层次。
              main: {
                // 场景主光源的设置，在 globe 组件中就是太阳光。
                // color: '#0c294d', //主光源的颜色。[ default: #fff ]
                intensity: 1, //主光源的强度。[ default: 1 ]
                shadow: true, //主光源是否投射阴影。默认关闭。    开启阴影可以给场景带来更真实和有层次的光照效果。但是同时也会增加程序的运行开销。
                //shadowQuality: 'high',      // 阴影的质量。可选'low', 'medium', 'high', 'ultra' [ default: 'medium' ]
                alpha: 70, // 主光源绕 x 轴，即上下旋转的角度。配合 beta 控制光源的方向。[ default: 40 ]
                beta: 10, // 主光源绕 y 轴，即左右旋转的角度。[ default: 40 ]
              },
              ambient: {
                // 全局的环境光设置。
                // color: '#fff', // 环境光的颜色。[ default: #fff ]
                intensity: 0, // 环境光的强度。[ default: 0.2 ]
              },
            },

            viewControl: {
              // 用于鼠标的旋转，缩放等视角控制。
              projection: "perspective", // 投影方式，默认为透视投影'perspective'，也支持设置为正交投影'orthographic'。
              autoRotate: false, // 是否开启视角绕物体的自动旋转查看。[ default: false ]
              autoRotateDirection: "cw", // 物体自传的方向。默认是 'cw' 也就是从上往下看是顺时针方向，也可以取 'ccw'，既从上往下看为逆时针方向。
              autoRotateSpeed: 10, // 物体自传的速度。单位为角度 / 秒，默认为10 ，也就是36秒转一圈。
              autoRotateAfterStill: 3, // 在鼠标静止操作后恢复自动旋转的时间间隔。在开启 autoRotate 后有效。[ default: 3 ]
              damping: 0, // 鼠标进行旋转，缩放等操作时的迟滞因子，在大于等于 1 的时候鼠标在停止操作后，视角仍会因为一定的惯性继续运动（旋转和缩放）。[ default: 0.8 ]
              rotateSensitivity: 1, // 旋转操作的灵敏度，值越大越灵敏。支持使用数组分别设置横向和纵向的旋转灵敏度。默认为1, 设置为0后无法旋转。	rotateSensitivity: [1, 0]——只能横向旋转； rotateSensitivity: [0, 1]——只能纵向旋转。
              zoomSensitivity: 2, // 缩放操作的灵敏度，值越大越灵敏。默认为1,设置为0后无法缩放。
              panSensitivity: 1, // 平移操作的灵敏度，值越大越灵敏。默认为1,设置为0后无法平移。支持使用数组分别设置横向和纵向的平移灵敏度
              panMouseButton: "left", // 平移操作使用的鼠标按键，支持：'left' 鼠标左键（默认）;'middle' 鼠标中键 ;'right' 鼠标右键(注意：如果设置为鼠标右键则会阻止默认的右键菜单。)
              rotateMouseButton: "left", // 旋转操作使用的鼠标按键，支持：'left' 鼠标左键;'middle' 鼠标中键（默认）;'right' 鼠标右键(注意：如果设置为鼠标右键则会阻止默认的右键菜单。)
              distance: 300, // [ default: 100 ] 默认视角距离主体的距离，对于 grid3D 和 geo3D 等其它组件来说是距离中心原点的距离,对于 globe 来说是距离地球表面的距离。在 projection 为'perspective'的时候有效。
              minDistance: 40, // [ default: 40 ] 视角通过鼠标控制能拉近到主体的最小距离。在 projection 为'perspective'的时候有效。
              maxDistance: 400, // [ default: 400 ] 视角通过鼠标控制能拉远到主体的最大距离。在 projection 为'perspective'的时候有效。
              alpha: 40, // 视角绕 x 轴，即上下旋转的角度。配合 beta 可以控制视角的方向。[ default: 40 ]
              beta: 15, // 视角绕 y 轴，即左右旋转的角度。[ default: 0 ]
              minAlpha: -360, // 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。[ default: 5 ]
              maxAlpha: 360, // 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。[ default: 90 ]
              minBeta: -360, // 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。[ default: -80 ]
              maxBeta: 360, // 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。[ default: 80 ]
              center: [0, 0, 0], // 视角中心点，旋转也会围绕这个中心点旋转，默认为[0,0,0]。
              animation: true, // 是否开启动画。[ default: true ]
              animationDurationUpdate: 1000, // 过渡动画的时长。[ default: 1000 ]
              animationEasingUpdate: "cubicInOut", // 过渡动画的缓动效果。[ default: cubicInOut ]
            },
            // boxWidth: '200px',
            // boxHeight: '300px',
            regionHeight: 5,
            data: mapDate,
          },

          // 区域散点图
          // {
          //   type: "scatter3D",
          //   coordinateSystem: "geo3D",
          //   zlevel: 999,
          //   symbolSize: 8,
          //   // rippleEffect: { //坐标点动画
          //   //     period: 3,
          //   //     scale: 5,
          //   //     brushType: 'fill'
          //   // },
          //   label: {
          //     normal: {
          //       show: true,
          //       position: "top",
          //       // formatter: '{b}',
          //       formatter: function (params) {
          //         return params.data.name + "\n" + params.data.datas;
          //       },
          //       backgroundColor: "#fff",
          //       textStyle: {
          //         color: "#2676df",
          //         borderWidth: 1,
          //         borderColor: "red",
          //         fontWeight: "bold",
          //         fontSize: 16,
          //         textAlign: "center",
          //       },
          //     },
          //   },

          //   data: mapDate,
          //   itemStyle: {
          //     //坐标点颜色
          //     normal: {
          //       show: true,
          //       color: "#c0e6f2",
          //       shadowBlur: 20,
          //       shadowColor: "#fff",
          //     },
          //     emphasis: {
          //       areaColor: "#f00",
          //     },
          //   },
          // },
          {
            type: "scatter3D",
            coordinateSystem: "geo3D",
            // itemStyle: {
            //     color: '#fff', // 图片不受color影响，但建议设置
            // },
            symbol:
              "path://M500.224 0a226.688 226.688 0 0 0-226.176 227.2c0 100.096 142.784 277.376 201.6 345.6a32 32 0 0 0 48.64 0c58.752-68.224 201.6-245.696 201.6-345.6A226.752 226.752 0 0 0 500.224 0z m0 334.912a97.472 97.472 0 1 1 95.488-99.2v1.792a97.28 97.28 0 0 1-95.552 97.28v0.128z m0 0l519.68 585.856-135.936-449.152a27.968 27.968 0 0 0-28.16-28.288h-175.168a1515.456 1515.456 0 0 1-154.752 213.312 32 32 0 0 1-45.568 3.52 29.44 29.44 0 0 1-3.456-3.52 1451.008 1451.008 0 0 1-154.688-213.312H162.56a28.032 28.032 0 0 0-28.16 28.288L2.56 905.152a28.288 28.288 0 0 0 33.92 36.8l317.184-70.4a27.904 27.904 0 0 1 28.096 4.032l190.208 142.08a27.52 27.52 0 0 0 23.68 5.632l399.68-64a28.608 28.608 0 0 0 26.048-31.04 33.472 33.472 0 0 0-1.536-7.104l-519.68-586.24z",
            symbolSize: [40, 46],
            symbolOffset: [-100, -0],
            itemStyle: {
              color: "red",
            },
            // symbol: dingwei, // 所有点统一用dingwei图片
            // symbolSize: [40, 40], // 可根据实际图片比例调整
            // symbolOffset: [0, -20], // 根据实际效果微调
            zlevel: 99,
            data: mapDate,
          },
        ],
      };
    },
  },
};
</script>
<style lang="scss" scoped>
.center_bottom {
  width: 100%;
  height: 100%;

  .echarts_bottom {
    width: 100%;
    height: 100%;
  }
}
</style>
